<template>
	<view class="allSlider" :style="movebleView">
		<view class="page-bodyall">
			<view class="page-body">
				<view class="title">
					旋转至正位
				</view>
				<image src="../../static/image/mc.png" mode="" :style="rotate" class="img"></image>
				<view class="uni-padding-wrap uni-common-mt">
					<view class="blackhx">

					</view>
					<movable-area>
						<movable-view direction="horizontal" :x="x" :y="y" @change="onChange" @touchend="end" :style="movable"></movable-view>
					</movable-area>
				</view>
			</view>
			<view class="" >
						<image src="../../static/image/z.png" mode="" class="z"></image>
			</view>
		</view>


	</view>
</template>
<script>
	export default {
		props: {
			movebleView: ""
		},
		data() {
			return {
				x: 0,
				y: 0,
				scale: 2,
				old: {
					x: 0,
					y: 0,
					scale: 2
				},
				rotate: "",
				start: "",
				jl: "",
				movable: "",
				zero: "",
			}
		},
		mounted: function() {
			var _this = this
			for (var i = 1; i <= 10; i++) { //组建形成随机角度
				var a = _this.random(40, 280)
			}
			_this.a = a
			var a = a
			_this.start = a
			this.rotate = "transform:rotate(" + a + "deg)"
		},
		methods: {
			onChange: function(e) {
				var _this = this
				this.x = e.detail.x
				var jl = this.start + e.detail.x + 40
				_this.jl = jl
				_this.rotate = "transform:rotate(" + jl + "deg)"
				_this.movable = "transform: translateX(" + e.detail.x + "px)"
			},
			end() {
				var _this = this
				if (349 < Number(_this.jl) && Number(_this.jl) < 370) { //符合条件
					uni.showToast({
						icon: "success",
						duration: 2000
					})
					setTimeout(function() {

					}, 2000);
					this.$emit("verification", "display:none");
					return;
				}
				if (0 < Number(_this.jl) && Number(_this.jl) < 349 || Number(_this.jl) > 370) { //不符合条件
					uni.showToast({
						icon: "none",
						image: "/uni@2x.png"
					})
					_this.rotate = "transform:rotate(" + _this.start + "deg)"
					_this.movable = "transform: translateX(0px); "
					_this.x = 0
					_this.old.x = 0
				}
			},
			//生成随机数
			random(min, max) {
				return Math.floor(Math.random() * (max - min)) + min;
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
	}

	page-body {
		margin: 0;

	}

	.allSlider {
		background: rgba(20, 20, 38, 0.9);
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.title {
		font-size: 30upx;
		color: #333;
		text-align: center;
		margin-bottom: 30upx;
		font-weight: 500;
	}
	.page-bodyall{
		width: calc(86% - 20upx);
		height: 700upx;
		margin: 0 auto;
		position: relative;
		top: 50%;
		left: 50%;
		margin-top: -350upx;
		margin-left: -43%;
		text-align: center;
	}
	
	.page-body {
		width: calc(100%-20upx);
		height: 400upx;
		background: #fafafa;
		position: relative;
		text-align: center;
		padding: 40upx 10upx;
		border-radius: 36upx;
	}

	.uni-common-mt {
		width: 100%;
		margin: 0 auto;
		margin: 0;
		padding: 0;
		position: absolute;
		bottom: 20upx;
	}

	movable-area {
		height: 90upx;
		width: 92%;
		background: transparen;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 50upx;
		position: relative;
	}

	.blackhx {
		height: 11upx;
		width: 92%;
		margin: 0 auto;
		margin-left: 10upx;
		background: #141426;
		border: 5px solid rgba(20, 20, 37, 0.25098039215686274);
		line-height: 90upx;
		position: absolute;
		top: 18upx;
		border-radius: 36upx;
		border: 10upx solid rgba(255, 255, 255, 0.5);
		box-shadow: 0px 5px 11px rgba(0, 0, 0, 0.3);
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 62upx;
		width: 62upx;
		background: url(../../static/image/yzicon.png) no-repeat;
		background-size: 100% 100%;
		border-radius: 50%;
	}



	.max {
		width: 500upx;
		height: 500upx;

	}

	.img {
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		background: #0062CC;
		margin: 0 auto;
	}

	.z {
		height: 232upx;
		width: 232upx;
		margin-top: 64upx;
	}
</style>
